<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04class与style绑定</title>
    <style>
      .aClass{
        color : red;
      }
      .bClass{
        color: blue;
      }
      .cClass{
        font-size: 30px;
      }
    </style>
</head>
<body>
<!--
1. 理解
    在应用界面中，某个(些)元素的样式是变化的
    class与style绑定就是专门用来实现动态样式效果的技术
2. class绑定： :class='xxx'
    xxx是字符串
    xxx是对象
    xxx是数组
3.style绑定
    :style="{ color:activeColor , fontSize:fontSize+'px' }"
    其中activeColor/fontSize是data属性
-->
    <div id="demo">
      <h2> 1.class绑定：:class='xxx' </h2>
        <!--"'aClass'" : 带有单引号标识一个值(写死了)，去掉单引号表示一个变量(可以在data中赋值) -->
        <!-- 第一个为静态的，第二个为动态的 -->
        <p class="cClass" :class="a">xxx是字符串</p>
        <p :class="{ aClass:isA , bClass:isB }">xxx是对象</p>
        <p :class="['aClass','cClass']">xxx是数组</p>

      <h2> 2.style绑定 </h2>
      <!-- 内部谢的js代码，不是以前的键值对     -->
      <p :style="{color:activeColor , fontSize:fontSize + 'px'}">:style="{ color:activeColor , fontSize:fontSize+'px' }"</p>

      <button @click="update">更新</button>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
       new Vue({
         el:'#demo',
         data:{
            a: 'aClass',
            isA: true,
            isB: false,
           activeColor: 'red',
           fontSize: '20'
         },
         methods:{
            update(){
              this.a = 'bClass';
              this.isA = false;
              this.isB = true;
              this.activeColor = 'green';
              this.fontSize = 30;
            }
         }
       });
    </script>
</body>
</html>
